<template>
  <div>
    <el-card class="mt-10" shadow="never" :body-style="{'padding':'10px 20px'}">
      <div class="d-flex f-align" slot="header">
        <el-checkbox
          :indeterminate="options.isIndeterminate"
          v-model="options.checkedAll"
          @change="handleCheckAll"
        ></el-checkbox>
        <h4 class="ml-10">{{options.name}}</h4>
        <template v-if="options.tips">
          <el-link type="info" :underline="false" icon="el-icon-info" class="fs-16 ml-10 mr-5"></el-link>
          <span class="fs-12">{{options.tips}}</span>
        </template>
      </div>
      <el-checkbox-group v-model="options.checked" @change="handleCheckedChange">
        <el-checkbox
          v-for="child in options.children"
          :label="child.value"
          :key="child.value"
          class="pt-5 pb-5"
        >{{child.name}}</el-checkbox>
      </el-checkbox-group>
    </el-card>
  </div>
</template>

<script>
export default {
  props: ["options"],
  watch: {
    options: {
      immediate: true,
      deep: true,
      handler(val, old) {
        if (val != old) {
          this.init(val.checked);
        }
      }
    }
  },
  methods: {
    init(val) {
      this.handleCheckedChange(val);
    },
    // 全选
    handleCheckAll(val) {
      this.options.checked = val ? this.options.children.map(o => o.value) : [];
      this.isIndeterminate = false;
      this.$emit("getChecked",  this.options.checked);
    },
    handleCheckedChange(val) {
      let valLength = val.length;
      this.options.isIndeterminate = valLength > 0 && valLength < this.options.children.length;
      this.options.checkedAll = valLength == this.options.children.length;
      this.$emit("getChecked", val);
    }
  }
};
</script>
